<template>
    <div>
        <a-modal
            title="扫码在线签名"
            :visible="visible"
            @cancel="visible = false"
        >
            <template slot="footer">
                <div style="display: flex;justify-content: flex-end;">
                    <a-button @click="visible = false">关闭</a-button>
                </div>
            </template>
            <div>
                <canvas :key="canvasKey" :id="canvasId" width="472px" height="380px"></canvas>
            </div>
            <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="linkClick()">链接</a-button>
        </a-modal>
    </div>
</template>
<script>
import {qrcanvas} from 'qrcanvas'
export default {
    components:{

    },
    props:{

    },
    data(){
        return{
            newImage:new Image(),
            queryResultsQr:null,
            queryResultsImgUrl:'',
            canvasKey:null,
            canvasId:'signedVersion'+ new Date().getTime(),
            visible:false,
            currentId:'',
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        getData(id){
            this.currentId = id
            this.queryResultsQr = qrcanvas({
                data: bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+`inspectorSystemPersonalInfoSignedVersion?id=`+id|| "二维码生成中",
                size:260,
                background:'#fff'
            })
            this.queryResultsImgUrl = this.newImage.src = this.queryResultsQr.toDataURL("image/png")
            this.canvasKey = Date.now()
            this.$nextTick(()=>{
                var canvas = document.getElementById(this.canvasId);
                var context = canvas.getContext('2d');
                context.font = "22px Arial"
                context.textAlign = "center"
                // context.globalCompositeOperation = 'source-in';
                context.fillStyle = "#000";
                context.background = '#fff'
                context.fillText('签字',236,50);
                var img = new Image();
                img.onload = function() {
                    context.drawImage(img, 106, 80,260,260);
                }
                img.src = this.queryResultsQr.toDataURL("image/png");
            })
        },
        linkClick(){
            var link = document.createElement('a');
            link.target='_blank'
            link.href = bootConfig[process.env.NODE_ENV].EXTERNAL_ACCESS_URL2+process.env.BASE_URL+`inspectorSystemPersonalInfoSignedVersion?id=`+this.currentId; // 设置图片链接
            link.click(); // 模拟点击链接，下载图片

        },
    }
}
</script>
<style lang="less">

</style>